<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .bg {
        /* background-color: yellow; */
        color: aqua;
    }

    .cont {
        width: 300px;
        border: 1px solid #ddd;
    }

    * {
        margin: 0;
        padding: 0;
    }

    .list {
        width: 600px;
        margin: 0 auto;
    }

    .list ul li {
        height: 40px;
        line-height: 40px;
        margin-top: 10px;
        color: #fff;
        padding-left: 10px;
        background: #70B9DE;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 10px 10px 2px rgba(0, 0, 0, 0.2);
    }

    .list ul li button {
        color: #fff;
        background: #409eff;
        outline: none;
        border: 1px solid #409eff;
        margin-right: 10px;
        padding: 3px 8px;
        cursor: pointer;
    }

    .input-group {
        width: 100%;
    }

    .input-group input {
        margin-top: 40px;
        display: block;
        width: 100%;
        height: 40px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    .btn-group button {
        margin-top: 10px;
        display: inline-block;
        padding: 12px;
        color: #fff;
        background: #008000;
        outline: none;
        border: 1px solid #008000;
        cursor: pointer;
        width: 100%;
        border-radius: 5px;
        box-shadow: 0 10px 10px 2px rgba(0, 0, 0, 0.3)
    }

    .textareaa {
        position: relative;
        width: 600px;
    }

    .wordwrap {
        position: absolute;
        right: 6px;
        bottom: 6px;
    }
</style>

<body>
    <div id="app">
        <!-- 第一题 -->
        <div @mouseenter="aindex = true" @mouseleave="aindex = false"
            style="width: 100px; height: 100px; background-color: red;">
            <div v-if="aindex">我是隐藏的div</div>
        </div>


        <!-- 第二题 -->
        <button @click="aindex2 = true">登录</button>
        <div v-if="aindex2">
            <span @click="aindex2 = false">X</span><br>
            <input type="text"><br>
            <input type="text"><br>
        </div>


        <!-- 第三题and第四题 -->
        <div>
            <button v-for="(item,index) in pay" @click="playi = index" :class="{'bg':playi === index}">{{item}}</button>
            <div v-for="(paym,index) in payment" v-show="index === playi">{{ paym }}</div>
        </div>

        <!-- 第五题 -->
        <div class="cont" @click="selectflag = !selectflag">
            {{ selecto }}
            <div v-if="selectflag">
                <div v-for="(item,index) in select" @click="selecto = item;">{{item}}</div>
            </div>
        </div>


        <!-- 第六题 -->
        <div class="list">
            <ul>
                <li v-for="(item,index) in list_inp">{{item}}
                    <button @click="list_inp.splice(index,1)">删除</button>
                </li>
            </ul>
            <div class="input-group">
                <input type="text" id="name" placeholder="输入姓名" v-model="obj">
            </div>
            <div class="btn-group">
                <button @click="list_inp.push(obj);obj=''">增加</button>
            </div>
        </div>



        <!-- 第七题 -->
        <input :type="flag?'text':'password'">
        <button @click="flag= !flag">显示/隐藏</button><br>


        <!-- 第八题 -->
        <div class="textareaa">

            <textarea placeholder="请输入" maxlength="200" style="width: 100%;height: 100px;" v-model="legt"></textarea>


            <span class="wordwrap"><span class="word">{{ 200 - legt.length}}</span>/200</span>
        </div>

    </div>
</body>
<script src="./vue.js"></script>
<script>
    const { createApp, ref } = Vue
    createApp({
        setup() {
            //鼠标放上去显示 移开消失 
            const aindex = ref(false)
            //点击登陆 弹出登录框点击X关闭登录框 
            const aindex2 = ref(false)
            //切换支付方式效果
            let pay = ref(['支付宝', '微信', '银行卡'])
            let payment = ref(["支付宝支付", "微信支付", "银行卡支付"])
            let playi = ref(0)
            //模拟下拉框
            let select = ref(['选项1', "选项2", "选项3"])
            let selectflag = ref(false)
            let selecto = ref("选项1")
            //动态添加删除数据
            let list_inp = ref([])
            let obj = ref('')
            //一个密码输入框，带有一个按钮用于切换显示或隐藏密码文本
            let flag = ref(false)
            //字数统计
            let legt = ref('')
            return {
                aindex,
                aindex2,
                pay,
                payment,
                playi,
                select,
                selectflag,
                selecto,
                obj,
                list_inp,
                flag,
                legt
            }
        }
    }).mount("#app")
</script>

</html>